<template>
  <div class="carts">
    <div class="carts_top">
      <router-link to="/sell">
        <Icon type="chevron-left" class="top-left"></Icon>
      </router-link>
      <div class="top-center" v-for="items in sell_all">
        <span>{{buy}}</span>
        <span>{{estimate}}</span>
      </div>
      <div>
        <Icon type="android-share-alt" class="top-right"></Icon>
      </div>
    </div>
    <div style="clear: both"></div>

    <div class="carts_all">
      <img :src="gettitle[0].head" />
      <div class="carts_all_left">
      <p class="price"><Icon type="social-yen" class="price01"></Icon>{{gettitle[0].num}}</p>
        <p class="left">{{gettitle[0].num01}}   <Input-number :max="10" :min="1" :step="1" v-model="value2" size="small"></Input-number></p>
        <p class="right">{{gettitle[0].num02}}</p>
        <div style="clear: both"></div>
        <p class="title">{{gettitle[0].title}}</p>
      </div>

      <div class="carts_all_right"></div>
      <div style="clear: both"></div>
      <div class="choose">
          <p class="choose_left">送至：</p>
          <Cascader v-model="value3" :data="data" filterable></Cascader>
          <p class="choose_bottom"><Icon type="paper-airplane"></Icon>留言</p>
          <p class="choose_bottomone"><Icon type="share"></Icon>私信</p>
          <p class="choose_bottom-right"><Button @click="open(true)" style="color: white; background: red;">立即购买</Button> </p>
          <div style="clear: both"></div>
      </div>
      <hr class="hr">
      <div class="estimate">
        <p>用户评价</p>
        <Rate v-model="value" class="right"></Rate>
      </div>
      <div class="merchant">
        <p class="one">宝贝描述：{{gettitle[0].boy}}<span class="four">{{gettitle[0].boys}}</span></p>
        <p class="two">卖家服务：{{gettitle[0].boy01}}<span class="five">{{gettitle[0].boys01}}</span></p>
        <p class="three">物流服务：{{gettitle[0].boy02}}<span class="six">{{gettitle[0].boys02}}</span></p>
      </div>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        value: 0,
        value2: 1,
        value4:'',
        modal1: false,
        buy:'作品',
        estimate:'评价',
        data: [{
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        },
          {
            value: 'jiangxisheng',
            label: '江西省',
            children: [
              {
                value: 'zhushanqu',
                label: '珠山区',
                children: [
                  {
                    value: 'jingdezhenxueyuan',
                    label: '景德镇学院',
                  }
                ]
              },
              {
                value: 'zhushandongshi',
                label: '珠山东市',
                children: [
                  {
                    value: 'fuliangzhen',
                    label: '浮梁镇',
                  },
                  {
                    value: 'jingdezhentaocidaxue',
                    label: '景德镇陶瓷大学',
                  }
                ]
              }
//            {
//              value: 'jiangxi',
//              label: '江西',
//              children: [
//                {
//                  value: 'jingdezhen',
//                  label: '景德镇',
//                },
//                {
//                  value: 'taocidaxue',
//                  label: '陶瓷大学',
//                }
//              ]
//            }
            ],
          },
          {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙',
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园',
                },
                {
                  value: 'shizilin',
                  label: '狮子林',
                }
              ]
            }
          ],
        }],
        value3: []
      }
    },
    computed:{
      ...mapState(['sell_all']),
      gettitle:function () {
        var id=this.id
        return this.sell_all.filter(function (number) {
          return number.id==id
        })
      },
      id(){
        return this.$route.params.id
      }
    },
    created(){

    },
    methods: {
      ok () {
        this.$Message.info('点击了确定');
      },
      open (nodesc) {
        this.$Notice.open({
          title: '购买成功',
        });
      },
      cancel () {
        this.$Message.info('点击了取消');
      }
    }
  }
</script>


<style scoped>

  .carts_top{overflow: hidden;background: #464c5b;height: 40px;}
  .top-left{font-size: 25px;color: #FFFFFF;line-height: 40px;float: left;width: 10%;text-align: center;}
  .top-center{color: white;width: 80%;float: left;}
  .top-center span{width: 50%;display: block;float: left;text-align: center;line-height: 40px;font-size: 16px;font-family: "楷体";}
  .top-right{color: white;float: left;width:10%;text-align: center;font-size: 20px;line-height: 40px;}
  .carts_all_left{width: 70%;float: left;}
  .carts_all img{height: 200px;width: 100%;border-top: 3px solid white;border-bottom:3px solid white;display: block; }
  .carts_all .price{color: red;font-weight: bolder;}
  .price01{border-radius: 10px;border: 1px solid red;margin: 10px;}
  .carts_all_left .left{float: left; color: gainsboro;margin: 5%}
  .carts_all_left .right{float: right; color: gainsboro;margin: 2%;line-height: 27px;margin-top: 14px;}
  .title{margin: 5%;color: black;font-weight: bolder}
  .carts_all_right{float: right;}
  .choose{margin-left: 4%;}
  .choose_left{float: left;font-size: 14px;font-weight: bolder;color: gainsboro;}
  .choose_bottom{margin-top: 20px;float: left;width:20%;text-align: center;font-size: 16px;font-family: "楷体"}
  .choose_bottomone{float: left;margin-top: 20px;width: 20%;text-align: center;font-size: 16px;font-family: "楷体"}
  .choose_bottom-right{float: left;width: 60%;text-align: right;margin-top: 20px;}
  .hr{margin-top:20px;margin-bottom: 20px;color: gainsboro; }
  .estimate{margin-left: 14px; float: left;width: 50%;border-right: 1px solid gainsboro;}
  .estimate p{float: left;margin-top: 8px;}
  .estimate .right{margin-left: 10px;}
  .merchant{float: left;margin-left: 20px;}
  .merchant .one,.three{color: #68ff4c;}
  .merchant .four,.six,.five{color:white;border: 1px solid white;border-radius: 3px; margin-left: 10px;background:#68ff4c; }
  .merchant .two{color: red;}
  .merchant .five{background: red;}
</style>
